<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业样式.css">
    <link rel="stylesheet" href="./font1/iconfont.css">
</head>
<body>
        <button class="ab" onclick="show()">点击留言</button>
       
            <ul>
        
            </ul>
        
        <div class="son">
            <div class="son1">
                <p class="a1">message</p> <span class="iconfont icon-guanbi" onclick="no()"></span>
            </div>
            <font>name</font><input type="text" class="b1"><br>
            <font>content</font><textarea class="c1"></textarea>
            <p class="a2"><button class="but">确定</button>&nbsp;&nbsp;&nbsp;<button onclick="no()">关闭</button></p>
        </div>
    
</body>
</html>
<script>
    function  dateTime(){
        var date=new Date()
        var n=date.getFullYear();
        var y=date.getMonth()+1;
        var t=date.getDate();
        var h=date.getHours();
        var m=date.getMinutes();
        var s=date.getSeconds();
        if(h>=0&&h<=12){
            return n+'/'+y+'/'+t+'上午'+h+':'+m+':'+s;
        }else{
            return n+'/'+y+'/'+t+'下午'+h+':'+m+':'+s;
        }
    }
    console.log(dateTime());
    

    var son=document.querySelector('.son')
    function show(){
        son.style.opacity='1';
    }
    function no(){
        son.style.opacity='0';
    }
    //获取输入的内容
    var b1=document.querySelector('.b1')
    var c1=document.querySelector('.c1')
    var but=document.querySelector('.but')

    //获取
    var ul=document.querySelector('ul')

    but.onclick=function(){
    if(b1.value.trim()!=''&&c1.value.trim()!=''){
         //创建
    var li=document.createElement('li')
    //赋值
    li.innerHTML=`
    <h4>${b1.value}</h4>
    <p>${dateTime()}</p>
    <p>${c1.value}</p>
    <b class="iconfont icon-guanbi" onclick="del(this)"></b>
    `;
    //添加
    ul.insertBefore(li,ul.children[0])
    li.style.opacity='1';
    b1.value='';
    c1.value='';
    no()
    }else{
        alert('内容为空，不得发布')
       
    }
    }
    function del(aaa){
        ul.removeChild(aaa.parentNode)
    }
    
    
</script>